<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生命周期</title>
  <script src="../js/vue.js"></script>
</head>

<!-- 
    a,mounted发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作 
    b,beforeDestroy清除定时器、解绑自定义事件、取消订阅消息等收尾工作 
  关于销毁Vue实例
    a,销毁后借助Vue开发者工具看不到任何信息
    b,销毁后自定义事件会失效，但原生DOM事件依然有效
    c,一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了
 -->

<body>
  <div id="root" :x="n">
    <h2 v-text="n"></h2>
    <h2>当前的n值是：{{ n }}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el: '#root',
    // template:`
    // 	<div>
    // 		<h2>当前的n值是：{{n}}</h2>
    // 		<button @click="add">点我n+1</button>
    // 	</div>
    // `,
    data: {
      n: 1
    },
    methods: {
      add() {
        console.log('add')
        this.n++
      },
      bye() {
        console.log('bye')
        this.$destroy()
      }
    },
    watch: {
      n() {
        console.log('n变了')
      }
    },
    beforeCreate() { console.log('beforeCreate') },
    created() { console.log('created') },
    beforeMount() { console.log('beforeMount') },
    mounted() { console.log('mounted') },
    beforeUpdate() { console.log('beforeUpdate') },
    updated() { console.log('updated') },
    beforeDestroy() { console.log('beforeDestroy') },
    destroyed() { console.log('destroyed') },
  })
</script>

</html>